<template>
    <div class="paddingTop">
        <el-row>
            <el-col :span="2">
                <el-button type="primary" @click="addJobBtn" size="medium">新增职位</el-button>
            </el-col>
            <el-col :span="22">
                <selectPositionBtn></selectPositionBtn>    <!--查询组件-->
            </el-col>
        </el-row>
        <!--新增职位弹出框-->
        <el-dialog title="新增职位" :visible.sync="dialogFormVisible" width="500px" center :close-on-click-modal = 'false'>
            <el-form :rules='addPositionRules' :model="newJobData" ref="newJobData">
                <el-form-item label="职位" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="newJobData.name" autocomplete="off" placeholder="请输入职位"></el-input>
                </el-form-item>
                <el-form-item label="权限" :label-width="formLabelWidth">
                    <el-select v-model="newJobData.roleId" placeholder="请选择权限" style="width: 100%">
                        <el-option v-for="item in permissionsData" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注信息" :label-width="formLabelWidth">
                    <el-input type="textarea" autosize placeholder="请输入备注信息" v-model="newJobData.remark" maxlength="40" show-word-limit style="line-height: 20px">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="toAddJob('newJobData')">提交</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {mapActions} from 'vuex'
    import selectPositionBtn from "./selectPositionBtn";

    export default {
        name: "addPositionBtn",
        components:{
            selectPositionBtn,
        },
        data(){
            //验证职位名称
            let YZ_name = (rule, value, callback)=>{
                if (value === '' || value === undefined) {
                    callback(new Error('请输入职位名称'));
                }else {
                    if(!(this.jobNameState)){
                        callback('职位名称已存在');
                    }
                    callback();
                }
            };
            return{
                jobNameState:true,  //新增职位状态
                dialogFormVisible:false,   //新增职位弹窗的显示状态
                addPositionRules:{    //新增职位表单验证规则
                    name:[{validator:YZ_name,trigger:'blur'}],  //验证职位名称
                },
                newJobData:{name:'',roleId:'-1',remark:''},    //新增职位信息
                formLabelWidth:'80px',   //新增职位弹窗label的宽度
                permissionsData:[   //新增职位弹窗中权限下拉列表
                    {value:'-1',label:'-1'},
                    {value:'0',label:'0'},
                    {value:'1',label:'1'},
                    {value:'2',label:'2'},
                    {value:'3',label:'3'},
                ],
            }
        },
        watch:{
            'newJobData.name':function () {
                this.checkNewJobName();
            }
        },
        methods:{
            ...mapActions(['isTrueJobName','addNewJob','userOperation','showJobInfo']),
            //用户操作日志
            positionOperation(){
                let operation = {//用户操作
                    userName:this.$store.state.user.userName,//用户名
                    operationDate:this.$store.state.nowTime.time,//用户操作时间
                    operationMessage:`新增职位（${this.newJobData.name}），权限为${this.newJobData.roleId}`,//用户操作内容
                };
                this.userOperation(operation)//需要在操作完成后，调用处理用户操作的函数
            },
            //查询表格数据
            tablePositionsInfo(){
                this.showJobInfo({"pageCount":this.$store.state.staffPositionStore.pages.currentPage, "pageSize": this.$store.state.staffPositionStore.pages.pageSize}).then(res=>{
                    if (res.code!==200){
                        // console.log(res);
                        this.$message({
                            type: 'error',
                            message: '职位信息加载失败'
                        });
                    }
                });
            },
            //点击“新增”按钮
            addJobBtn(){
                // console.log('点击addJobBtn');
                this.newJobData={name:'',roleId:'-1',remark:''};  //刷新输入框等
                this.dialogFormVisible=true;
            },
            //验证职位名是否已存在
            checkNewJobName(){
                this.isTrueJobName({name:this.newJobData.name}).then(res=>{
                    res.code===200 ? this.jobNameState=true : this.jobNameState=false;
                })
            },
            //点击新增职位弹窗“提交”按钮
            toAddJob(formName){
                this.newJobData.createBy=this.$store.state.user.userName;   //创建人
                this.newJobData.createTime=new Date(this.$store.state.nowTime.time);   //创建时间
                // console.log(this.newJobData);
                this.$refs[formName].validate((valid) => {
                    if(valid){     //表单输入全部验证通过
                        this.addNewJob(this.newJobData).then(res=>{
                            if (res.code===200){
                                this.$message({
                                    type: 'success',
                                    message: '新增成功！'
                                });
                                this.positionOperation(); //新增成功，记录操作日志
                                this.dialogFormVisible=false;  //新增职位弹窗的显示状态
                                this.tablePositionsInfo();   //刷新页面
                            }else {
                                this.$message({
                                    type: 'error',
                                    message: '新增失败！'
                                });
                            }
                        })
                    } else {
                        this.$message({
                            type: 'error',
                            message: '请输入正确的职位信息'
                        });
                        return false;
                    }
                });
            }
        },
        created() {

        }
    }
</script>

<style scoped>
    .paddingTop{
        padding-top: 20px;
    }
</style>